<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<button id="open">打开</button>
		<button id="close">关闭</button>
		<p id="msg" style="display: none;">我的江湖我做主</p>
		
	</body>
</html>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script type="text/javascript">
	const view ={
		init(){
			this.bindEvent();
		},
		
		bindEvent(){
			console.log('外面',this);
			$('#open').on('click',() => {
				this.open();
			});
			
			// 使用箭头函数，this不会改变，绑定时是指向谁，执行的时候也就指向谁
			$('#close').on('click',() => {
				console.log('里面',this);
				this.close();
			})
		},
		
		
		open(){
			$('#msg').show()
		},
		
		close(){
			$('#msg').hide();
		}
	}
	view.init();
</script>
<script type="text/javascript">
	const swordsman = {
		init(){
			this.bindEvent();
		},
		
		bindEvent(){
			console.log('外面的',this);
			$('#open').on('click',function(){
				
				this.open();
			})
			
			$('#close').on('click',function(){
				console.log('里面的',this);
				this.close();
			})
		},
		
		open(){
			$('#msg').show();
		},
		
		close(){
			$('#msg').close();
		}
	}
</script>